<script setup lang="ts">

let modelProgress = ref(0);
const progressFormat = (percentage) => `加载进度 ${percentage}%`;
let timer = setInterval(() => {
  if (modelProgress.value < window.newThree.loadProgress) {
    modelProgress.value = window.newThree.loadProgress
  }
  if (modelProgress.value >= 100) {
    clearInterval(timer)
  }
}, 300)
</script>

<template>
  <div v-if="modelProgress<100" class="bacImg">
    <div class="progress">
      <el-progress
          :format="progressFormat"
          :percentage="modelProgress"
          :stroke-width="48"
          :text-inside="true"
          color="#6f88a1"
      />
    </div>
  </div>
</template>

<style scoped lang="less">
.bacImg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/threeJs/images/threeM.png");
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;

  .progress {
    width: 10vw;
  }
}
</style>
